<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-inner sliding">

        <div class="title">数据查询</div>
      </div>
    </div>
    <div class="page-content">
      <div class="block">

      </div>
      <form class="list form-store-data" id="query-form" action="#" method="get">
        <ul>
          <li class="item-content item-input">
            <div class="item-inner">
              <div class="item-title item-label">设备</div>
              <div class="item-input-wrap input-dropdown-wrap">
                <select name="fmeter">
                  {{#each fLastData}}
                  <option value="{{metercode}}">{{metername}}</option>
                  {{/each}}
                </select>
              </div>
            </div>
          </li>
          <li class="item-content item-input">
            <div class="item-inner">
              <div class="item-title item-label">起始</div>
              <div class="item-input-wrap">
                <input name="start" type="date" value="" placeholder="请选择...">
              </div>
            </div>
          </li>
          <li class="item-content item-input">
            <div class="item-inner">
              <div class="item-title item-label">结束</div>
              <div class="item-input-wrap">
                <input name="end" type="date" value="" placeholder="请选择...">
              </div>
            </div>
          </li>

          <li class="item-content item-input">
            <div class="item-inner">
              <div class="item-title">历史数据</div>
              <div class="item-after">
                <label class="toggle toggle-init color-blue">
                  <input type="checkbox" name='history'>
                  <span class="toggle-icon"></span>
                </label>
              </div>
            </div>
          </li>

          <li>
            <p class="row">
              <button id="btn_query" type="button" class="col button button-fill">查询</button>
            </p>
          </li>
        </ul>
      </form>
    </div>
  </div>
</template>

<script>
  return {
    data: function () {
      return {
        data: [],
      };
    },
    on: {
      pageInit: function (e, page) {
        var self = this;
        $$('#btn_query').on('click', function () {
          var metername = $$("select[name='fmeter']").text();
          var metercode = $$("select[name='fmeter']").val();
          var start = $$("input[name='start']").val();
          var end = $$("input[name='end']").val();
          var toggle = app.toggle.get('.toggle');
          var history = 'off';
          if (toggle.checked) {
            history = 'on';
          }
          var router = self.$router;
          if (start.length === 0 || end.length === 0 || metercode.length === 0) {
            app.dialog.alert("请选择正确的查询条件");
          }
          else {
            //app.dialog.alert("/query_result/" + metercode + "/" + metername + "/" + history + "/"+ start + "/" + end + "/");
            router.navigate("/query_result/" + metercode + "/" + metername + "/" + history + "/" + start + "/" + end + "/");
          }
        });
      }
    }
  }
</script>